<template>
  <div> 
    <div class="container">
      <div v-for="(item,index) in iconArrys" :key="index">
        <div class="crumbs icon_crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <i class="el-icon-lx-picfill"></i>
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="container icon_container">
          <ul>
            <li class="icon-li" v-for="(ot,index) in item.icons" :key="index">
              <div class="icon-li-content">
                <i :class="ot"></i>
                <span>{{ot}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import fonts from "../assets/config/iconfont.json";
export default {
  name: "icon",
  data() {
    return {
      keyword: "",
      iconArrys: [
        {
          icons: fonts.icons,
          title: this.$t("icon.elemneticon")
        },
        {
          icons: fonts.icons_lx,
          title: this.$t("icon.defaulticon")
        }
      ]
    };
  },
  computed: {
    list() {
      return this.iconList.filter(item => {
        return item.indexOf(this.keyword) !== -1;
      });
    }
  }
};
</script>

<style scoped>
.example-p {
  height: 45px;
  display: flex;
  align-items: center;
}
.search-box {
  text-align: center;
  margin-top: 10px;
}
.search {
  width: 300px;
}
ul,
li {
  list-style: none;
}
.icon-li {
  display: inline-block;
  padding: 10px;
  width: 130px;
  height: 130px;
}
.icon-li-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;  
  width: 130px;
}
.icon-li-content i {
  font-size: 36px;
  color: #606266;
}
.icon-li-content span {
  margin-top: 10px;
  color: #787878;
}
</style>